<template>
  <rx-layout>
    <div slot="center" style>
      <rx-fit :isheader="isheader">
        <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
          <div class="table-operator">
            <rx-button alias="bpmArchiveLogAdd" :butn-icon="'plus'" :butn-type="'primary'" :show-no-right="true"
                       @click="add">{{$ti18('rxList.newBtn',"新建")}}
            </rx-button>
            <a-dropdown v-if="removeEnable && selectedRowKeys.length > 0">
              <rx-button alias="bpmArchiveLogDelete" :butn-icon="'delete'" :butn-type="'danger'"
                         :show-no-right="false" @click="delByIds(selectedRowKeys)">
                  {{$ti18('rxList.delBtn','删除')}}
              </rx-button>
            </a-dropdown>

          </div>
          <span class="search-btn-box" v-if="!isheader">
                <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>
                {{$ti18('rxList.leachBtn','过滤')}}
                </span>
              </span>
        </div>
        <div  btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel" @close="closeSearchbar">
          <a-form :layout="colLayout">
            <a-row :gutter="24">
              <a-col :span="colSpan">
                  <a-form-item :label="i18n('form.status','状态')">
                      <a-select :placeholder="i18n('form.status','状态','input')" v-model="queryParam.Q_STATUS__S_EQ" :allowClear="true">
                          <a-select-option v-for="(item,key) in statusMap" :value="key" :key="key">
                              {{ item.text }}
                          </a-select-option>
                      </a-select>
                  </a-form-item>
              </a-col>
              <a-col :span="colSpan">
                <a-form-item :label="i18n('form.archiveDateFrom','归档日期')">
                    <a-range-picker format="YYYY-MM-DD" @change="createTimeChange" v-model="dateRange"/>
                  </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <rx-grid
          ref="table"
          :allowRowSelect="true"
          :multiSelect="true"
          :columns="columns"
          :bordered="isBorder"
          :defaultPageSize="10"
          url="/api-bpm/bpm/core/bpmArchiveLog/query"
          :queryParam="queryParam"
          data-field="result.data"
          :pageSizeOptions="[10,30,40]"
          id-field="id"
          @selectChange="onSelectChange"
        >
           <span slot="status" slot-scope="{ text, record }">
              <a-tag :color="statusMap[text].color">
              <span>{{statusMap[text].text}}</span>
              </a-tag>
          </span>
            <span slot="appId" slot-scope="{ text, record }">
              {{allApps[text]?$i18(allApps[text].appName,'应用名称'):$ti18('rxList.noAppName','无')}}
            </span>
          <span slot="action" slot-scope="{ text, record }" class="actionIcons">
            <span @click="getArchiveLog(record.id)">
                {{i18n('form.lookOver','查看')}}
            </span>
            <span v-if="removeEnable && showBtn(false)" @click="delByIds([record.id])">
                {{$ti18('rxList.delBtn','删除')}}
            </span>
          </span>
        </rx-grid>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
  import BpmArchiveLogApi from '@/api/bpm/core/bpmArchiveLog'
  import BpmArchiveLogEdit from './BpmArchiveLogEdit'
  import BpmArchiveLogEdit2 from './BpmArchiveLogEdit2'
  import {BaseList,Util} from '@lowcode/jpaas-common-lib';
  import { mapState} from 'vuex';
  export default {
    name: 'BpmArchiveLogList',
    mixins: [BaseList],
      computed: {
          ...mapState({
              // 所属应用
              allApps: state => state.appSetting ? state.appSetting.allApps : {}
          }),
      },
    data() {
      return {
        columns: [
          {
            title: this.$ti18('rxList.index','序号'),
            type: 'indexColumn',
            width: 40,
            dataIndex: 'serial',
            scopedSlots: {customRender: 'serial'}
          },
          {title: this.i18n('form.archiveDate','归档日期'), dataIndex: 'archiveDate', width: 100},
          {title: this.$ti18('rxForm.notes','备注'), dataIndex: 'memo', width: 100},
          {title: this.i18n('form.startTime','开始时间'), dataIndex: 'startTime', width: 100},
          {title: this.i18n('form.endTime','结束时间'), dataIndex: 'endTime', width: 100},
          {title: this.i18n('form.status','状态'), dataIndex: 'status', width: 100,scopedSlots: {customRender: 'status'}},
          {title: this.i18n('form.application','所属应用'), dataIndex: 'appId', width: 140, sortField: 'APP_ID_',scopedSlots: {customRender: 'appId'}},
            {title: this.$ti18('rxForm.createTime','创建时间'), dataIndex: 'createTime', sorter: true, sortField: 'CREATE_TIME_', width: 120},
          {title: this.$ti18('rxList.action','操作'), width: 60, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
        ],
        statusMap: {
          "1": {color: 'green', text: this.i18n('statusMap.success','成功')},
          "0": {color: 'red', text: this.i18n('statusMap.fail','失败')},
          "": {color: 'gray', text: this.i18n('statusMap.archiving','归档中')},
        },
        component: BpmArchiveLogEdit,
        comment: this.i18n('list.comment','流程归档日志'),
        widthHeight: ['700px', '500px'],
        dateRange:[],
      }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmArchiveLog",key);
        },
        createTimeChange(dateArray,dateStrings){
            this.queryParam['Q_ARCHIVE_DATE__D_GE']=dateStrings[0];
            this.queryParam['Q_ARCHIVE_DATE__D_LE']=dateStrings[1];
        },
      delById(ids) {
        return BpmArchiveLogApi.del({ids: ids.join(',')});
      },
      getListByParams(parameter) {
        return BpmArchiveLogApi.query(parameter)
      },
      getArchiveLog(id){
        var self=this;
        Util.open({
          component:BpmArchiveLogEdit2,
          curVm:self,
          widthHeight:['800px','600px'],
          title:this.i18n('form.viewArchivedRecords','查看归档记录'),
          data:{id:id}
        },function (action){});
      },
      search(){
        this.$refs.table.loadData();
      },
      cancel(){
        this.queryParam={}
        this.dateRange = [];
        this.resetSearch();
      },
      closeSearchbar(){
        //关闭过滤弹窗；（点击X触发）
        this.fitSearch = false ;
      }
    }
  }
</script>
<style scoped>

</style>

